<template>
  <view class="bd">
    <view class="inp-group" style="">
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">就诊医院</view>
        <input
          class="inp"
          type="text"
          placeholder="请输入就诊医院"
          v-model="hosptial"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">就诊科室</view>
        <input
          class="inp"
          type="text"
          placeholder="请输入就诊科室"
          v-model="department"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">就诊医生</view>
        <input
          class="inp"
          type="text"
          placeholder="请输入就诊医生"
          v-model="doctor"
        />
      </view>
      <view style="height: 50upx"></view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">病情描述</view>
        <textarea
          placeholder="输入病情描述"
          v-model="represent"
          value="text"
          class="inp"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">就诊时间</view>
        <picker
          class="t1"
          mode="date"
          :value="visitTime"
          @change="dateChange1"
          style="width: 100%"
          ><view>{{ visitTime }}</view></picker
        >
      </view>
      <view class="inp-item uni-item-line">
        <view class="inp-title" style="width: 200upx">上传报告 </view>
        <view class="flex flex-al-c">
          <u-icon
            name="web-icon-"
            custom-prefix="custom-icon"
            color="#18C7E1"
            size="48px"
            @tap="uploadImg"
          ></u-icon>
          <view class="imgbox">
            <view v-for="(item, index) in imgUrl">
              <uploadimg
                :item="item"
                :index="index"
                :imgUrlS="imgUrl"
              ></uploadimg>
            </view>
          </view>
        </view>
      </view>
      <view style="margin-top: 100upx">
        <button type="default" class="sbtn" @tap="sub">完成</button>
      </view>
    </view>
  </view>
</template>

<script>
import uploadimg from "@/components/uploadimg/uploadimg";
export default {
  components: { uploadimg },
  data() {
    return {
      doctor: "",
      hosptial: "",
      department: "",
      imgUrl: [],
      represent: "",
      visitTime: this.config.pub.getDate(),
    };
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    dateChange1(e) {
      this.visitTime = e.target.value;
    },
    // 上传图片
    uploadImg() {
      let self = this;
      uni.chooseImage({
        count: 1,
        sizeType: "compressed",
        sourceType: ["album"],
        success(res) {
          //console.log(res)
          uni.showLoading({ title: "加载中", mask: true, duration: 5000 });
          setTimeout((s) => {
            uni.hideLoading();
          }, 5000);
          self.config.upload(
            res.tempFiles[0],
            (file) => {
              uni.hideLoading();
              // //console.log('上传成功了:', file)
              if (file.code === 200) {
                self.imgUrl.push(file.msg);
              } else {
                uni.showToast({ title: file.message, icon: "none" });
              }
            },
            (progress) => {
              // //console.log('进度：' + progress)
            }
          );
        },
      });
    },
    valid() {
      if (!this.doctor) {
        uni.showToast({ title: "输入就诊医生", icon: "none" });
        return false;
      }
      if (!this.hosptial) {
        uni.showToast({ title: "输入就诊医院", icon: "none" });
        return false;
      }
      if (!this.imgUrl) {
        uni.showToast({ title: "上传病情图片", icon: "none" });
        return false;
      }
      if (!this.represent) {
        uni.showToast({ title: "输入病情描述", icon: "none" });
        return false;
      }
      return true;
    },
    sub() {
      if (!this.valid()) return;
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      let obj = {
        doctor: this.doctor,
        hosptial: this.hosptial,
        department: this.department,
        imgUrl: this.imgUrl.toString(),
        represent: this.represent,
        visitTime: this.visitTime,
      };
      this.config.post("/medicalRecords/uploadRecord", obj).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          uni.showToast({ title: "上传成功" });
          setTimeout((s) => {
            uni.navigateBack();
          }, 1000);
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.inp-group {
  width: 85%;
  margin: 0 auto;
  .inp-item {
    margin-top: 10upx;
    padding: 15upx 0;
    .inp-title {
      padding: 15upx 0;
      font-size: 30upx;
      font-weight: 900;
      color: #777;
    }
    .inp {
      padding: 15upx 0;
      color: #333;
    }
  }
  .sbtn {
    background: #18c7e1;
    color: #fff;
    margin-bottom: 50rpx;
  }
}
.imgbox {
  height: 200rpx;
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  //  黑暗模式
  .bd {
    background-color: #1b1c1e !important;
    height: 100%;
    margin-top: -5px;
  }
  .t1 {
    color: #ccc !important;
  }
  .inp {
    color: #e5e8e8 !important;
  }
}
</style>
